<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>人事管理系统</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <script src="/statics/libs/vue.min.js"></script>
    <script src="/statics/libs/jquery.min.js"></script>
    <link rel="stylesheet" href="/statics/plugins/element-ui/lib/theme-chalk/index.css">
    <script src="/statics/plugins/element-ui/lib/index.js"></script>

</head>
<body>
<div id='app' style="height: 100%">
    <el-container style="height: 100%; border: 0px solid #eee">
        <el-header>
            <el-header style="">
                <el-menu
                        default-active=""
                        class="el-menu-demo"
                        mode="horizontal"
                        @select="handleSelect"
                        background-color="#545c64"
                        text-color="#fff"
                        active-text-color="#ffd04b">
                    <span style="position: absolute;z-index: 999;font-family: '华文行楷', sans-serif;font-size: larger;color: white">人事管理系统</span>
                    <el-submenu style="float: right" index="">
                        <template slot="title">
<!--                            <img style="width: 50px; height: 50px;border-radius:100%;"-->
<!--                                 :src="user.photo"/> -->
                            {{user.chineseName}}
                        </template>
                        <el-menu-item v-if="user.roleId===3" @click="showCompanyInfo">修改公司信息</el-menu-item>
                        <el-menu-item @click="showInfo">修改个人信息</el-menu-item>
                        <el-menu-item @click="logout">退出</el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-header>
        </el-header>
        <el-container style="height: 100%">
            <el-aside width="240px" style="height: 100%">
                <el-menu
                        default-active="2"
                        class="el-menu-vertical-demo"
                        @open="handleOpen"
                        @close="handleClose"
                        @select="changeUrl"
                        background-color="#545c64"
                        text-color="#fff"
                        active-text-color="#ffd04b"
                        style="height: 100%"
                >
                    <menu-item :item="item" v-for="item in menuList"></menu-item>
                </el-menu>
            </el-aside>

            <el-main>
                <iframe scrolling="yes" frameborder="0"
                        style="width:100%;height: 95%; overflow:visible;background:#fff;" :src="src"
                        id="mainIframe"></iframe>
            </el-main>
        </el-container>
    </el-container>

    <!--修改个人信息-->
    <el-dialog title="修改个人信息" :visible.sync="dialogFormVisible">
        <el-form :model="user" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="用户名" prop="username">
                <el-input v-model="user.username" auto-complete="new-password"></el-input>
            </el-form-item>
            <el-form-item label="姓名" prop="chineseName">
                <el-input v-model="user.chineseName" auto-complete="new-password"></el-input>
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input type="password" v-model="user.password" auto-complete="new-password"></el-input>
            </el-form-item>
            <el-form-item label="身份证号" prop="idNumber">
                <el-input v-model="user.idNumber"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
                <el-radio-group v-model="user.sex">
                    <el-radio v-for="sex in sexList" :label="sex.id">{{sex.sex}}</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="年龄" prop="age">
                <el-input v-model="user.age"></el-input>
            </el-form-item>
            <el-form-item label="学历" prop="education">
                <el-input v-model="user.education"></el-input>
            </el-form-item>
            <el-form-item label="专业" prop="major">
                <el-input v-model="user.major"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="updateInfo">确 定</el-button>
        </div>
    </el-dialog>

    <!--修改公司信息-->
    <el-dialog title="修改公司信息" :visible.sync="dialogFormVisibleForCompany">
        <el-form :model="company" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="名称" prop="name">
                <el-input v-model.trim="company.name"></el-input>
            </el-form-item>
            <el-form-item label="规模" prop="num">
                <el-input v-model.trim="company.num"></el-input>
            </el-form-item>
            <el-form-item label="简介" prop="describe">
                <el-input type="textarea" v-model.trim="company.describe"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisibleForCompany = false">取 消</el-button>
            <el-button type="primary" @click="updateCompanyInfo">确 定</el-button>
        </div>
    </el-dialog>

</div>


</body>
<style>
    html {
        height: 100%;
    }

    body {
        margin: 0;
        height: 100%;
    }

    .el-header {
        background-color: #545c64;
        color: #333;
        line-height: 60px;
    }

    .el-aside {
        color: #333;
    }
</style>
<script>
    var menuItem = Vue.extend({
        name: 'menu-item',
        props: {item: {}},
        template: [
            '<el-submenu :index="item.url" v-if="item.type === 0">',
            '   <template slot="title">',
            '       <i :class="item.icon"></i>',
            '       <span>{{item.name}}</span>',
            '   </template>',
            '   <el-menu-item :index="child.url" v-for="child in item.children" v-if="child.type===1">',
            '       <i :class="child.icon"></i>',
            '       <span>{{child.name}}</span>',
            '   </el-menu-item>',
            '   <menu-item v-if="item.type===0" :item="item" v-for="item in item.children"></menu-item>',
            '</el-submenu>',
            '<el-menu-item :index="item.url" v-else>',
            '   <i :class="item.icon"></i>',
            '   <span slot="title">{{item.name}}</span>',
            '</el-menu-item>',
        ].join('')
    })
    //注册菜单组件
    Vue.component('menuItem', menuItem);
    var vm = new Vue({
        el: '#app',
        data: {
            src: "main.html",
            menuList: [],
            user: {},
            sexList:[
                {
                    id:0,
                    sex:'男'
                },
                {
                    id:1,
                    sex:'女'
                }
            ],
            company:{
                name:"",
                num:null,
                describe:""
            },
            dialogFormVisible: false,
            dialogFormVisibleForCompany: false,
            rules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, message: '密码最少六位', trigger: 'blur' }
                ]
            }
        },
        methods: {
            changeUrl(key, keyPath) {
                if (key != null && key !== '') {
                    vm.src = key;
                }
            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            getMenuList: function (event) {
                $.getJSON("sys/menu/nav?_" + $.now(), function (r) {
                    vm.menuList = r.menuList;
                });
            },
            updateInfo: function (event) {
                this.$refs['ruleForm'].validate((valid) => {
                    if (valid) {
                        $.ajax({
                            type: "POST",
                            url: 'sys/user/update',
                            contentType: "application/json",
                            data: JSON.stringify(vm.user),
                            // data: vm.user,
                            success: function (r) {
                                if (r.code === 0) {
                                    Vue.prototype.$message({
                                        type: 'success',
                                        message: '操作成功!'
                                    });
                                    vm.dialogFormVisible=false;
                                } else {
                                    Vue.prototype.$message({
                                        type: 'error',
                                        message: r.msg
                                    });
                                }
                            }
                        });
                    } else {
                        return false;
                    }
                });

            },
            updateCompanyInfo: function (event) {
                this.$refs['ruleForm'].validate((valid) => {
                    if (valid) {
                        $.ajax({
                            type: "POST",
                            url: 'dev/company/update',
                            contentType: "application/json",
                            data: JSON.stringify(vm.company),
                            // data: vm.user,
                            success: function (r) {
                                if (r.code === 0) {
                                    Vue.prototype.$message({
                                        type: 'success',
                                        message: '操作成功!'
                                    });
                                    vm.dialogFormVisibleForCompany=false;
                                } else {
                                    Vue.prototype.$message({
                                        type: 'error',
                                        message: r.msg
                                    });
                                }
                            }
                        });
                    } else {
                        return false;
                    }
                });

            },
            showInfo(){
                this.dialogFormVisible=true;
            },
            showCompanyInfo(){
                this.dialogFormVisibleForCompany=true;
            },
            logout: function () {
                $.get("sys/logout", function (r) {
                    window.location.href = "login.html"
                })
            },
            getUser: function () {
                $.getJSON("getLoginUserInfo", function (r) {
                    vm.user = r;
                    if (r.company != null){
                        vm.company = r.company;
                    }
                });
            },
        },
        created: function () {
            this.getMenuList();
            this.getUser();
        },
    });
</script>
</html>
